<template>
  <div class="container">
    <ul ref="titleBar" class="table-title-wrapper" :style="{width:pwidth}">
      <li class="table-title" v-for="(titleItem,index) in tableData.title" :key="index">{{titleItem}}</li>
    </ul>
    <div class="dot">
    </div>
    <ul ref="indexBar" class="table-title-index-wrapper">
      <li class="table-title-index" v-for="(row,index)  in tableData.rows" :key="index">{{index}}</li>
    </ul>
    <div class="tableWrapper">
      <div class="wrapper" ref="wrapper" :style="{height:'100%',width:'100%'}">
        <table class="dataTable" ref="dataTable" :style="{width:pwidth}" cellpadding="0" cellspacing="0" border="0">
          <tr :key="index" v-for="(row,index)  in tableData.rows">
            <td :key="index" v-for="(col,index)  in row">{{col}}</td>
          </tr>
        </table>
        <div class="loading-wrapper"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import './style.less';
  // import BScroll from 'better-scroll';

  const item = [];
  const pos = {};

  export default {
    name: 'DocTable2',
    props: {
      tableData: {
        type: Object,
      },
      pwidth: String,
      isLoadding: Boolean,
      tableLength: Number,
    },
    components: {},
    data: function() {
      return {
        processData: false,
        scroll: {},
      };
    },
    watch: {
      tableLength: function() {
        setTimeout(()=>{ this._refresh();},50)
      },
    },
    mounted() {
      // 保证在DOM渲染完毕后初始化better-scroll
      this.iScollProbe = require('iscroll/build/iscroll-probe');
      this._initScroll();
    },
    methods: {
      _refresh() {
        this.scroll.refresh();
      },
      _initScroll() {
        if (!this.$refs.wrapper) {
          return;
        }
        // better-scroll的初始化
        this.scroll = new this.iScollProbe('.wrapper', {
          preventDefault: true,
          probeType: 3,
          mouseWheel: false,
          scrollX: true,
          scrollY: true,
          disableMouse: true,
          disablePointer: true,
          lockDirection: true,
          disableTouch: false,
          bounce: false,
        });

        this.scroll.on('scroll', (pos) => {
          this.$refs.titleBar.style.transform = 'translate(' + (this.scroll.x) + 'px, 0px) translateZ(0px)';
          this.$refs.indexBar.style.transform = 'translate(0px,' + (this.scroll.y) + 'px) translateZ(0px)';
        });
        // this.scroll.on('beforeScrollStart', () => {
        //   this.scroll.refresh();
        // });
        this.scroll.on('scrollEnd', () => {

            if (this.scroll.y <= (this.scroll.maxScrollY)) {
              if (!this.isLoadding) {
                this.$emit('needMoreData');
              }
            }
        });
      },
    },
  };
</script>

<style scoped>

</style>
